<template>
	<view>
		<home :cur="PageCur" v-if="PageCur == 'home'" :key="commponent1Key"></home>
		<people v-if="PageCur == 'people'" :key="commponent2Key"></people>
		<demand :cur="PageCur" v-if="PageCur == 'demand'"></demand>
		<profile :cur="PageCur" v-if="PageCur == 'profile'"></profile>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view
				:class="PageCur == 'home' ? 'action text-green' : 'action text-gray'"
				@click="NavChange"
				data-cur="home">
				<view class="cuIcon-homefill"></view>动态
			</view>
			<view
				:class="PageCur == 'demand' ? 'action text-green' : 'action text-gray'"
				@click="NavChange"
				data-cur="demand">
				<view class="cuIcon-peoplelist"></view>需求
			</view>
			<view class="add" @click="goPush" v-if="role === 'admin' || role === 'jz'">
				<uni-icons type="plusempty" color="#fff" size="35"></uni-icons>
			</view>
			<view
				:class="PageCur == 'profile' ? 'action text-green' : 'action text-gray'"
				@click="NavChange"
				data-cur="profile">
				<view class="cuIcon-profile"></view>排行
			</view>
			<view
				:class="PageCur == 'people' ? 'action text-green' : 'action text-gray'"
				@click="NavChange"
				data-cur="people">
				<view class="cuIcon-people"></view>我的
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			role: uni.getStorageSync("userInfo").result.roleCode,
			PageCur: "home",
			commponent1Key: 0,
			commponent2Key: 0,
			commponent3Key: 3,
		};
	},
	onLoad: function () {
		this.PageCur = "home";
		++this.commponent1Key;
		++this.commponent2Key;
	},
	methods: {
		NavChange: function (e) {
			this.PageCur = e.currentTarget.dataset.cur;
		},
		goPush() {
			uni.navigateTo({
				url: "/pages/component/addBuild",
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.add {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #2163e0;
	text-align: center;
	line-height: 50px;
}
</style>
